/*
 * @Author: Chris
 * @Date:   2019-10-23 09:40:06
 * @Last Modified by: Carrix
 * @Last Modified time: 2020-01-12 00:44:48
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Breadcrumb,Card,Row,Col } from 'antd'
import Layout from 'common/layout'

import "./index.css"
import { actionCreator } from './store'

class Home extends Component {
    constructor(props) {
        super(props)
    }
    componentDidMount(){
        // this.props.handleCount()
    }
    render() {
        //结构赋值   是从哪里取得？   是从=后面取得值 this.props
        const { usernum,ordernum,productnum } = this.props
        return (
            <div className="Home">
              <Layout>
                <Breadcrumb style={{ margin:'16px 0' }}>
                    <Breadcrumb.Item>首页</Breadcrumb.Item>
                </Breadcrumb>
                <div className="content">
                    <Row>
                        <Col span={8}>
                            <Card title="用户数" bordered={false} style={{ width: 300 }}>
                                <p>{usernum}</p>
                            </Card>
                        </Col>
                        <Col span={8}>
                            <Card title="商品数" bordered={false} style={{ width: 300 }}>
                                <p>{ordernum}</p>
                            </Card>
                        </Col>
                        <Col span={8}>
                            <Card title="订单数" bordered={false} style={{ width: 300 }}>
                                <p>{productnum}</p>
                            </Card>
                        </Col>
                    </Row>
                </div>
              </Layout>
        </div>
        );
    }
}


//映射属性到组件
const mapStateToProps = (state) => {
    return{
    //从state里面来的，这些下面定义的数据是通过get方法来的---get方法是redux-immutable里的获取数据的方法
    //state是redux里面的数据管理中心--redux的数据管理中心在reducer文件里执行
    usernum: state.get('home').get('usernum'),
    ordernum: state.get('home').get('ordernum'),
    productnum: state.get('home').get('productnum'),
}}
//映射方法到组件
const mapDispatchToProps = (dispatch) => ({
    handleCount:()=>{
        dispath(actionCreator.getCountAction())
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(Home)